import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Circle from './Circle'

export default class Point extends Component {
  static defaultProps = {
    isActive: false,
    isWarning: false,
  }

  static propTypes = {
    index: PropTypes.number.isRequired,
    radius: PropTypes.number.isRequired,
    borderWidth: PropTypes.number.isRequired,
    isActive: PropTypes.bool.isRequired,
    isWarning: PropTypes.bool.isRequired,
    backgroundColor: PropTypes.string,
    color: PropTypes.string.isRequired,
    activeColor: PropTypes.string.isRequired,
    warningColor: PropTypes.string.isRequired,
    position: PropTypes.shape({
      left: PropTypes.number.isRequired,
      top: PropTypes.number.isRequired,
    }).isRequired,
  }

  // 构造
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {}

    this._outerCircleRadius = props.radius
    this._outerCirclePosition = props.position
    this._innerCircleRadius = this._outerCircleRadius / 3
    this._innerCirclePosition = {
      left: this._innerCircleRadius * 2 - props.borderWidth,
      top: this._innerCircleRadius * 2 - props.borderWidth,
    }
  }

  render() {
    this._color = this.props.isWarning
      ? this.props.warningColor
      : this.props.isActive
      ? this.props.color
      : this.props.activeColor

    // let bgColor =
    //   this.props.isActive || this.props.isWarning
    //     ? this.props.backgroundColor
    //     : 'rgba(48, 160, 235, 0.2)'
    // let pointColor =
    //   this.props.isActive || this.props.isWarning ? '#d8d8d8' : '#30a0eb'
    return (
      <Circle
        backgroundColor={'white'}
        color={this._color}
        radius={this.props.radius}
        borderWidth={0.3}
        position={this._outerCirclePosition}
      >
        {this.props.isActive || this.props.isWarning ? (
          <Circle
            isFill={false}
            color={this._color}
            radius={this._innerCircleRadius}
            borderWidth={this.props.borderWidth}
            position={this._innerCirclePosition}
          />
        ) : (
          <Circle
            isFill={true}
            color={this._color}
            radius={this._innerCircleRadius}
            borderWidth={this.props.borderWidth}
            position={this._innerCirclePosition}
          />
        )}
      </Circle>
    )
  }
}
